// 这个文件通常是在使用 Webpack 的 DLL（Dynamic Link Library）插件时创建的配置文件。
// 这个文件用于配置 Webpack 以生成一个或多个动态链接库（DLL），
// DLL 插件允许你将第三方库预先编译成一个单独的文件，从而加速应用的启动时间和构建过程。

/** 作用：
 * 缓存效率：DLL 包含的库通常是不变的，它们可以被浏览器缓存，加速页面加载时间。当用户访问网站时，如果这些库没有变化，浏览器可以直接从缓存中加载，无需重新下载。
 * 分离构建产物：将第三方库和应用代码分离可以减少主应用包的大小，因为用户只需要下载应用代码，而库代码只需在首次访问时加载一次。
 * 优化构建时间：由于 DLL 在构建时仅包含第三方库，这意味着每次构建时，Webpack 不必重新打包这些库，从而加快了构建速度。
 */

//先去打包一些第三方库，后续打包的时候就不用再一次去打包他们了

const path = require("path")
const webpack = require("webpack")

// 打包出来的 dll 文件的存放目录
const dllPath = 'public/vendor'

module.exports = {
   mode: "production",
   entry: {
      // 需要提取出来提前打包的库文件
      vendor: ['vue', 'vuex', 'vue-router', 'element-ui', 'echarts']
   },

   // js：打包生成出的js文件：这些库的打包后的代码文件
   output: {
      path: path.join(__dirname, dllPath),
      filename: '[name].dll.js',          //vendor.dll.js
      // vendor.dll.js中暴露出的全局变量名
      // 保持与 webpack.DllPlugin 中的名称一致
      library: "[name]_[hash]"
   },
   
   plugins: [
      // 此插件用于在单独的 webpack 配置中创建一个 dll-only-bundle。 此插件会生成一个名为 manifest.json 的文件，
      // json：打包生成出的json文件：作用是记录哪些包库已经打包了，之后就不用再打包。
      // 之后还要在 webpack 的配置文件中使用 webpack 的 DIReferencePlugin 插件 告诉 webpack 哪些库第二次运行时不用再打包了
      new webpack.DllPlugin({
         // manifest.json 描述动态链接库包含了哪些内容
         path: path.join(__dirname, dllPath, "[name]-manifest.json"),
         // 保持与 output.library 中的名称一致
         name: "[name].[hash]",
         context: process.cwd()
      })
   ]
}